{% load my_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>MyAI</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0-dist/css/bootstrap.css">
    <script src="/static/plugins/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="/static/js/myjs.js"></script>

    <!-- aichart partial -->
    <link rel="stylesheet" href="/static/css/reset.min.css">
    <link rel="stylesheet" href="/static/assets/css/aichart.css">
    <link rel="stylesheet" href="/static/assets/css/ebook.css">
    <script src="/static/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/assets/js/aichart.js"></script>
    <script src="/static/assets/js/ebook.js"></script>
    <script src='/static/js/handlebars.min.js'></script>
    <script src='/static/js/list.min.js'></script>
    <link rel="shortcut icon" href="/static/images/favicon.ico" />
{#    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">#}
    <link rel="stylesheet" href="/static/admin/simpleui-x/fontawesome-free-6.2.0-web/css/all.min.css">
</head>
<body>
{% block midbody %}

{% endblock midbody %}
<div class="container" id="msgAlert" style="display: none">
    <footer class="fixed-bottom">
        {% if messages %}
            <div class="container mt-3" style="width: 62%">
            {% for message in messages %}
                {% if message.tags == 'error' %}
                    <div class="alert alert-danger alert-dismissible fade show hide">
                {% else %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show hide">
                {% endif %}
            {% with message|mySplit:"@" as msg %}
                <strong>{{ msg.0 }}:</strong>{{ msg.1 }}
            {% endwith %}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </footer>
</div>
<!-- end container -->
<script id="message-template" type="text/x-handlebars-template">
    <li class="clearfix">
        <div class="message-data align-right">
            <span class="message-data-time">{% verbatim %}{{time}}{% endverbatim %}, Today</span> &nbsp; &nbsp;
            <span class="message-data-name">我</span>
        </div>
        <div class="message other-message float-right" style="width: auto;max-width: 80%;word-wrap:break-word;">
            <pre style="white-space:pre-wrap;">{% verbatim %}{{messageOutput}}{% endverbatim %}</pre>
        </div>
    </li>
    {#    <div class="backdrop" id="sikao">#}
    {#        思考中...#}
    {#        <div class="loader">#}
    {#            <div class="dot"></div>#}
    {#            <div class="dot"></div>#}
    {#            <div class="dot"></div>#}
    {#            <div class="dot"></div>#}
    {#            <div class="dot"></div>#}
    {#        </div>#}
    {#    </div>#}
</script>

<script id="message-response-template" type="text/x-handlebars-template">
    <li class="clearfix">
        <div class="message-data">
            <span class="message-data-name">棉棉</span>
            <span class="message-data-time">{% verbatim %}{{time}}{% endverbatim %}, Today</span>
        </div>
        <div class="message my-message float-left" style="width: auto;max-width: 90%;word-wrap:break-word;">
            <pre style="white-space:pre-wrap;">{% verbatim %}{{response}}{% endverbatim %}</pre>
        </div>
    </li>
</script>
<script id="message-response-template-wait" type="text/x-handlebars-template">
    <li class="clearfix" id="sikao">
        <div class="message-data">
            <span class="message-data-name">棉棉</span>
            <span class="message-data-time">{% verbatim %}{{time}}{% endverbatim %}, Today</span>
        </div>
        <div class="message my-message float-left" style="width: auto;max-width: 90%;word-wrap:break-word;">
            <div class="backdrop">
                <div class="loader">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </li>
</script>
</body>
</html>